<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<title>vue</title>
<link rel="stylesheet" href="css/global.css">
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<link rel="stylesheet" href="css/order.css">
</head>
<body>
    <div class="page-shopping-cart" id="shopping-cart">
        <h4 class="cart-title">购物清单</h4>
        <div class="cart-product clearfix">
            <table>
                <thead>
                    <tr class="cart-product-title">
                        <th class="td-check">
                            <input type="checkbox" class="check-span fl check-all"  :class="{'check-true':isSelectAll}" @click="selectProduct(isSelectAll)" :checked="isSelectAll" id="checkAll"></input>全选</th>
                        <th class="td-product">商品</th>
                        <th class="td-num">数量</th>
                        <th class="td-price">单价(元)</th>
                        <th class="td-total">金额(元)</th>
                        <th class="td-do">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in productList" :key="index">
                        <td class="td-check"><input type="checkbox" class="check-span"  @click="item.select=!item.select" :class="{'check-true':item.select}" :checked="item.select"></input></td>
                        <td class="td-product"><img :src="item.pro_img" width="98" height="98">
                            <div class="product-info">
                                <h3>{{item.pro_name}}</h3>
                                <p>品牌：{{item.pro_brand}}&nbsp;&nbsp;产地：{{item.pro_place}}</p>
                                <p>规格/纯度:{{item.pro_purity}}&nbsp;&nbsp;起定量：{{item.pro_min}}</p>
                                <p>配送仓储：{{item.pro_depot}}</p>
                            </div>
                            <div class="clearfix"></div>
                        </td>
                        <td class="td-num">
                            <div class="product-num">
                                <a href="javascript:;" class="num-reduce num-do fl" @click="minus(index)"><span></span></a>
                                <input type="text" class="num-input" v-model="item.pro_num" @input="search($event,index)" @blur="check($event,index)">
                                <a href="javascript:;" class="num-add num-do fr" @click="add(index)"><span></span></a>
                            </div>
                        </td>
                        <td class="td-price">
                            <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p>
                        </td>
                        <td class="td-total">
                            <p class="red-text">￥<span class="total-text">{{(item.pro_price*item.pro_num).toFixed(2)}}</span></p>
                        </td>
                        <td class="td-do"><a href="javascript:;" class="product-delect"  @click="deleteOneProduct(index)">删除</a></td>
                    </tr>
                </tbody></table>
        </div>
        <div class="cart-product-info">
            <a class="delect-product" href="javascript:;" @click="deleteProduct">删除所选商品</a>
            <a class="keep-shopping" href="#">继续购物</a>
            <a class="btn-buy fr" href="javascript:;">去结算</a>
            <p class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></p>
            <p class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品总计（不含运费）：</p>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#shopping-cart',
        data:{
            productList:[
            {
                'pro_name': '产品名称2',//产品名称
                'pro_brand': 'skc',//品牌名称
                'pro_place': '韩国',//产地
                'pro_purity': '99.7%',//规格
                'pro_min': "215千克",//最小起订量
                'pro_depot': '上海仓海仓储',//所在仓库
                'pro_num': 3,//数量
                'pro_img': 'images/test1.jpg',//图片链接
                'pro_price': 800//单价
            },
            {
                'pro_name': '产品名称2',//产品名称
                'pro_brand': 'skc',//品牌名称
                'pro_place': '韩国',//产地
                'pro_purity': '99.7%',//规格
                'pro_min': "215千克",//最小起订量
                'pro_depot': '上海仓海仓储',//所在仓库
                'pro_num': 1,//数量
                'pro_img': 'images/test2.jpg',//图片链接
                'pro_price': 800//单价
            }
            ]
        },
        computed: {
            isSelectAll:function(){
                //如果productList中每一条数据的select都为true，返回true，否则返回false;
                return this.productList.every(function (val) { return val.select});
            },
            getTotal:function(){
                //获取productList中select为true的数据。
                var _proList=this.productList.filter(function (val) { return val.select}),totalPrice=0;
                for(var i=0,len=_proList.length;i<len;i++){
                    //总价累加
                    totalPrice+=_proList[i].pro_num*_proList[i].pro_price;
                }
                //选择产品的件数就是_proList.length，总价就是totalPrice
                return {totalNum:_proList.length,totalPrice:totalPrice}
            }
        },
        methods:{
            selectProduct:function(_isSelect){
                //遍历productList，全部取反
                for (var i = 0, len = this.productList.length; i < len; i++) {
                    this.productList[i].select = !_isSelect;
                }
            },//删除已经选中(select=true)的产品
            deleteProduct:function () {
                this.productList=this.productList.filter(function (item) {return !item.select})
            },
            //删除单条产品
            deleteOneProduct:function (index) {
                //根据索引删除productList的记录
                this.productList.splice(index,1);
            },
            search: function (event,index) {
                let flag = new RegExp("^[1-9]([0-9])*$").test(event.target.value);
                if(!flag){
                    this.productList[index].pro_num = '';
                }
            },
            check: function(event,index){
                if(event.target.value==''){
                    this.productList[index].pro_num = 0;
                }
            },
            //数量增加
            add: function(index){
                this.productList[index].pro_num++;
            },
            //数量减少
            minus: function(index){
                if(this.productList[index].pro_num>0){
                    this.productList[index].pro_num--;
                }else{
                    this.productList[index].pro_num = 0;
                }
                
            }
        },
        mounted:function () {
            //为productList添加select（是否选中）字段，初始值为true
            var _this=this;
            //为productList添加select（是否选中）字段，初始值为true
            this.productList.map(function (item) {
                _this.$set(item, 'select', true);
            })
        }
    })
</script>
</html>